<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel = "stylesheet" href ="stylesheets/index.css">
</head>
<body>
	<div class = "bracket">
		<h3>effect-bracket</h3>
		<div class = "nav-bracket common">
			<ul>
				<li><a href="#"><span class = "left-bar">[</span>仅退款<span class = "right-bar">]</span></a></li>
				<li><a href="#"><span class = "left-bar">[</span>换货<span class = "right-bar">]</span></a></li>
				<li><a href="#"><span class = "left-bar">[</span>维修<span class = "right-bar">]</span></a></li>
				<li><a href="#"><span class = "left-bar">[</span>补寄<span class = "right-bar">]</span></a></li>
				<li><a href="#"><span class = "left-bar">[</span>退货退款<span class = "right-bar">]</span></a></li>
			</ul>
		</div>
	</div>
	<div class = "bottom-line">
		<h3>effect-bottom-line</h3>
		<div class = "nav-bottom common">
			<ul>
				<li><a href="#">仅退款<span></span></a></li>
				<li><a href="#">换货<span></span></a></li>
				<li><a href="#">维修<span></span></a></li>
				<li><a href="#">补寄<span></span></a></li>
				<li><a href="#">退货退款<span></span></a></li>
			</ul>
		</div>
	</div>
	<div class = "double-sline">
		<h3>effect-double-line</h3>
		<div class = "nav-double common">
			<ul>
				<li><a href="#"><span class = "top-line"></span>仅退款<span class = "bottom-line"></span></a></li>
				<li><a href="#"><span class = "top-line"></span>换货<span class = "bottom-line"></span></a></li>
				<li><a href="#"><span class = "top-line"></span>维修<span class = "bottom-line"></span></a></li>
				<li><a href="#"><span class = "top-line"></span>补寄<span class = "bottom-line"></span></a></li>
				<li><a href="#"><span class = "top-line"></span>退货退款<span class = "bottom-line"></span></a></li>
			</ul>
		</div>
	</div>
	<div class = "double-slight">
		<h3>effect-double-line</h3>
		<div class = "nav-slight common">
			<ul>
				<li><a href="#"><span class = "top-slight"></span>仅退款<span class = "bottom-slight"></span></a></li>
				<li><a href="#"><span class = "top-slight"></span>换货<span class = "bottom-slight"></span></a></li>
				<li><a href="#"><span class = "top-slight"></span>维修<span class = "bottom-slight"></span></a></li>
				<li><a href="#"><span class = "top-slight"></span>补寄<span class = "bottom-slight"></span></a></li>
				<li><a href="#"><span class = "top-slight"></span>退货退款<span class = "bottom-slight"></span></a></li>
			</ul>
		</div>
	</div>
	<div class = "scale-down">
		<h3>effect-scale-down</h3>
		<div class = "navs-down common">
			<ul>
				<li><a href="#">仅退款</a></li>
				<li><a href="#">换货</a></li>
				<li><a href="#">维修</a></li>
				<li><a href="#">补寄</a></li>
				<li><a href="#">退货退款</a></li>
			</ul>
		</div>
	</div>
	<div class = "fall-down">
		<h3>effect-fall-down</h3>
		<div class = "navs-fall common">
			<ul>
				<li>
					<a href="#">仅退款</a>
					<a href="#" class = "hiden">仅退款</a>
				</li>
				<li>
					<a href="#">换货</a>
					<a href="#" class = "hiden">换货</a>
				</li>
				<li>
					<a href="#">维修</a>
					<a href="#" class = "hiden">维修</a>
				</li>
				<li>
					<a href="#">补寄</a>
					<a href="#" class = "hiden">补寄</a>
				</li>
				<li>
					<a href="#">退货退款</a>
					<a href="#" class = "hiden">退货退款</a>
				</li>
			</ul>
		</div>
	</div>
	<div class = "border-fall">
		<h3>effect-border-fall</h3>
		<div class = "navs-border common">
			<ul>
				<li><a href="#">仅退款<span></span></a></li>
				<li><a href="#">换货<span></span></a></li>
				<li><a href="#">维修<span></span></a></li>
				<li><a href="#">补寄<span></span></a></li>
				<li><a href="#">退货退款<span></span></a></li>
			</ul>
		</div>
	</div>
	<div class = "text-fill">
		<h3>effect-text-fill</h3>
		<div class = "navs-text common">
			<ul>
				<li><a href="#" data-hover = "仅退款">仅退款</a></li>
				<li><a href="#" data-hover = "换货">换货</a></li>
				<li><a href="#" data-hover = "维修">维修</a></li>
				<li><a href="#" data-hover = "补寄">补寄</a></li>
				<li><a href="#" data-hover = "退货退款">退货退款</a></li>
			</ul>
		</div>
	</div>
	<div class = "effect-push">
		<h3>effect-push</h3>
		<div class = "navs-push common">
			<a href="#" data-hover = "仅退款">仅退款</a>
			<a href="#" data-hover = "换货">换货</a>
			<a href="#" data-hover = "维修">维修</a>
			<a href="#" data-hover = "补寄">补寄</a>
			<a href="#" data-hover = "退货退款">退货退款</a>
		</div>
	</div>
	<div class = "push-two">
		<h3>effect-slide-two</h3>
		<div class = "navs-push-two common">
			<a href="#" data-hover = "仅退款"><span>仅退款</span></a>
			<a href="#" data-hover = "换货"><span>换货</span></a>
			<a href="#" data-hover = "维修"><span>维修</span></a>
			<a href="#" data-hover = "补寄"><span>补寄</span></a>
			<a href="#" data-hover = "退货退款"><span>退货退款</span></a>
		</div>
	</div>
	<div class = "effect-slide">
		<h3>effect-slide</h3>
		<div class = "navs-slide common">
			<a href="#" data-hover = "仅退款"><span>仅退款</span></a>
			<a href="#" data-hover = "换货"><span>换货</span></a>
			<a href="#" data-hover = "维修"><span>维修</span></a>
			<a href="#" data-hover = "补寄"><span>补寄</span></a>
			<a href="#" data-hover = "退货退款"><span>退货退款</span></a>
		</div>
	</div>
	<div class = "effect-slide-two">
		<h3>effect-slide</h3>
		<div class = "navs-slide-two common">
			<a href="#"><span data-hover = "仅退款">仅退款</span></a>
			<a href="#"><span data-hover = "换货">换货</span></a>
			<a href="#"><span data-hover = "维修">维修</span></a>
			<a href="#"><span data-hover = "补寄">补寄</span></a>
			<a href="#"><span data-hover = "退货退款">退货退款</span></a>
		</div>
	</div>

	<div class = "slide-3d">
		<h3>effect-slide</h3>
		<div class = "navs-slide3d common">
			<!-- <a href="#"><span data-hover = "仅退款">仅退款</span></a> -->
			<a href="#" data-hover = "仅退款"><span>仅退款</span></a>
			<!-- <a href="#"><span data-hover = "换货">换货</span></a> -->
			<a href="#" data-hover = "换货"><span>换货</span></a>
			<!-- <a href="#"><span data-hover = "维修">维修</span></a> -->
			<a href="#" data-hover = "维修"><span>维修</span></a>
			<!-- <a href="#"><span data-hover = "补寄">补寄</span></a> -->
			<a href="#" data-hover = "补寄"><span>补寄</span></a>
			<!-- <a href="#"><span data-hover = "退货退款">退货退款</span></a> -->
			<a href="#" data-hover = "退货退款"><span>退货退款</span></a>
		</div>
	</div>

	<div class = "slide-3d-two">
		<h3>effect-slide</h3>
		<div class = "navs-slide3d-two common">
			<a href="#"><span data-hover = "仅退款">仅退款</span></a>
			
			<a href="#"><span data-hover = "换货">换货</span></a>
			
			<a href="#"><span data-hover = "维修">维修</span></a>
			
			<a href="#"><span data-hover = "补寄">补寄</span></a>
			<a href="#"><span data-hover = "退货退款">退货退款</span></a>
		</div>
	</div>
	<div class = "effect-turn">
		<h3>effect-text-fill</h3>
		<div class = "navs-turn common">
			<ul>
				<a href="#" data-hover = "仅退款">仅退款</a>
				<a href="#" data-hover = "换货">换货</a>
				<a href="#" data-hover = "维修">维修</a>
				<a href="#" data-hover = "补寄">补寄</a>
				<a href="#" data-hover = "退货退款">退货退款</a>
			</ul>
		</div>
</body>
</html>